<template>
  <div>
  <el-dialog :title="title" :visible.sync="open"  width="780px" append-to-body>
    <el-tabs v-model="activeName">
      <el-tab-pane label="流程表单" name="first"></el-tab-pane>
      <el-tab-pane label="资产明细" name="second" v-if="form.instanceId">
        <ReceiptDetails ref="details" :instanceId="form.instanceId"></ReceiptDetails>
      </el-tab-pane>
      <el-tab-pane label="流程签批" name="third">
        <TaskApproval ref="task" :instanceId="form.instanceId"></TaskApproval>
      </el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="form" label-width="100px" v-if="activeName=='first'">
      <el-row>
        <el-form-item label="任务创建" class="item">
          {{form.createTime}} <span>由&nbsp;{{form.createBy}}&nbsp;创建&nbsp;&nbsp;</span>
          <div style="float:right" v-if="form.flowStatusOpt=='finished'">
            <el-button type="text" @click="printDoc(form.instanceId)">下载打印文件 </el-button>
          </div>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="流程名称" class="item">{{form.flowName}}</el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="料单类型" class="item">
          {{selectDictLabel(this.receiptTypeOptOptions, form.receiptTypeOpt)}}
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="二级单位" class="item">
            {{form.collegeOrgName}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="实验室" class="item">
            {{form.labName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="经费项目" class="item">
            {{form.fundsItem}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
            <el-form-item label="填单日期" class="item">
              {{form.fillDate}}
            </el-form-item>
          </el-col>
        <el-col :span="10">
          <el-form-item label="使用方向" class="item">
            {{selectDictLabel(this.expectUseOptions, form.expectUseOpt)}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item label="公司名称" class="item">
            {{form.manufactor}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="发票号" class="item">
            {{form.voucherNo}}
          </el-form-item>
        </el-col>
       <el-col :span="10">
         <el-form-item label="发票日期" class="item">
           {{form.purchaseDate}}
         </el-form-item>
       </el-col>

      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="总价(元)" class="item">
            {{form.totalPrice}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="金额大写" class="item">
            {{form.originalVoucher}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="收料人员" class="item">
            {{form.receiptorId}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="经办人员" class="item">
            {{form.handlingUserId}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="经办人姓名" class="item">
            {{form.contactUser}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="经办人电话" class="item">
            {{form.contactMobile}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注说明" class="item">
        {{form.comments}}
      </el-form-item>
      <el-form-item label="附件" class="item">
        <el-upload action="' '" :limit="10" show-file-list :auto-upload="false" :file-list="fileList"
          :on-preview="handlePictureCardPreview" multiple class="uploadCss" disabled
          style="width:500px"><span></span>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  import {
    getReceipt_form,
  } from "@/api/labbase/receipt_form";
  import TaskApproval from '@/views/labdata/flowTask/task_approval.vue';
  //import PreviewDevice from "@/views/labdata/repairedDevice/preview.vue";
  import ReceiptDetails from "@/views/labbase/receipt_form/details.vue";
  export default {
    name: "ReceiptPreview",
    components: {
      TaskApproval,
      //PreviewDevice,
      ReceiptDetails
    },
    data() {
      return {
        host:process.env.VUE_APP_PROXY,
        activeName: "first",
        // 料单类型字典
        receiptTypeOptOptions: [],
        expectUseOptions: [],
        // 遮罩层
        loading: true,
        //附件集合
        fileList: [],
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {},
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getDicts("receiptTypeOpt").then((response) => {
        this.receiptTypeOptOptions = response.data;
      });
      this.getDicts("expectUseOpt").then((response) => {
        this.expectUseOptions = response.data;
      });
    },
    methods: {
      cancel() {
        this.open = false;
        this.fileList = [];
        this.activeName = 'first';
        this.$emit("refresh");
      },
      //附件展示
      handlePictureCardPreview(file) {
        window.location.href = file.url;
        this.dialogVisible = true;
      },
      printDoc(instanceId){
        window.location.href = this.host+'/labdata/labFile/printReceipt?id='+instanceId;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        const instanceId = row.instanceId || this.ids;
        getReceipt_form(instanceId).then((response) => {
          this.form = response.data;
          if(this.form.images){
            this.fileList = [];
            this.form.images.forEach(item =>{
              this.fileList.push({
                id: item.fileId,
                name:item.fileName,
                url:this.host+'/labdata/labFile/image?fileId='+item.fileId,
              })
            });
          }
          this.open = true;
          this.title = "查看和签批单据";
        });
      },
    },
  };
</script>
<style type="text/css" scoped>
/deep/  .uploadCss .el-upload {
    display: none !important;
  }
  .item {
    margin-bottom: 2px;
  }
</style>
